約 3,724,563 件
https://w.atwiki.jp/keiplus/pages/23.html
JavaScript ECMAScript JavaScript TypeScript 本項は書きたての記事です。正確な情報は公式サイト、公式ドキュメント、記載の参照サイトでご確認ください。 目次 + 読む JavaScript目次 概要 TypeScript 主なビルトイン関数など 歴史 参考 概要 1995年、Brendan Eich氏を初めとするMozilla社によって開発されたウェブブラウザ向けスクリプト言語。 Mocha、LiveScriptと呼ばれていたが当時のSUN microsystems社と提携関係あったことからJavaScriptと改称された。 JavaScriptはMicrosoftや開発者たちとの権利争いがあって実質2009年で開発が中断されている。 2015年ごろからECMAScriptがEU諸国手動で開発が進行し、毎年メンテナンスされて更新されている。 TypeScript 2012年にMicrosoftがリリース。ver1.0は2014年リリース。 ECMAScriptをベースとしており、TypeScriptで書かれたコード(.ts)はコンパイル(トランスコンパイル・トランスパイル)で.jsファイルを出力してブラウザ上で動作する形。 開発環境としてnode.js/npmの環境が必要となる。 型の異なる関数呼び出し、代入などをコンパイル時に検出することで品質を高めることができる。 React、Angular、Vue、expressなど主要JSフレームワークで採用されておるデファクトスタンダードである。 主なビルトイン関数など 別ページ「JavaScript/関数」に記載 歴史 + 読む Edition Date published Changes from prior edition 1 Jun-97 First edition 2 Jun-98 Editorial changes to keep the specification fully aligned with ISO/IEC 16262 international standard 3 Dec-99 Added regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output and other enhancements 4 Abandoned Fourth Edition was abandoned, due to political differences concerning language complexity. Many features proposed for the Fourth Edition have been completely dropped; some are proposed for ECMAScript Harmony. 5 Dec-09 Adds "strict mode", a subset intended to provide more thorough error checking and avoid error-prone constructs. Clarifies many ambiguities in the 3rd edition specification, and accommodates behaviour of real-world implementations that differed consistently from that specification. Adds some new features, such as getters and setters, library support for JSON, and more complete reflection on object properties.[9] 5.1 Jun-11 This edition 5.1 of the ECMAScript Standard is fully aligned with third edition of the international standard ISO/IEC 16262 2011. 6 June 2015[10] The Sixth Edition, known as ECMAScript 2015,[11] adds significant new syntax for writing complex applications, including classes and modules, but defines them semantically in the same terms as ECMAScript 5 strict mode. Other new features include iterators and for/of loops, Python-style generators and generator expressions, arrow functions, binary data, typed arrays, collections (maps, sets and weak maps), promises, number and math enhancements, reflection, and proxies (metaprogramming for virtual objects and wrappers). As the first “ECMAScript Harmony” specification, it is also known as “ES6 Harmony”. 7 Work in progress The Seventh Edition is in a very early stage of development, but is intended to continue the themes of language reform, code isolation, control of effects and library/tool enabling from ES6. New features proposed include concurrency and atomics, zero-copy binary data transfer, more number and math enhancements, syntactic integration with promises, observable streams, SIMD types, better metaprogramming with classes, class and instance properties, operator overloading, value types (first-class primitive-like objects), records and tuples, and traits.[12][13] 参考 ECMAScript - Wikipedia, the free encyclopedia https //en.wikipedia.org/wiki/ECMAScript
https://w.atwiki.jp/playaholic/pages/25.html
JavaScript 補助的に良く使うモノなど ブラウザの履歴で移動 input type="button" name="名前" value="ボタンに表示する文字" onclick="javascript history.back()"
https://w.atwiki.jp/naobe/pages/73.html
言語に戻る はじめに Netscape社が制定。IEのJScriptとの互換性に問題があり、ECMAの標準規格ECMA-262(JavaScript1.1がベース)が制定され、この規格がJavaScriptの標準規格となった。 2009年時点では、JavaScript1.5~1.7。JavaScript2.0が現在検証中。 文法 コメント //コメント /* コメント */ 演算子 typeof演算子 オペランドに変数を用い、変数の型を表す文字を返す。"string","number","boolean","object","function","undefined"のどれかを返す。 等値演算子(==)と同値演算子(===) ==は型変換を行って、同じ値か確認する。===は型も含めて同じであるか判定する。 【例】 var a = "1"; var b = 1; if( a == b) { document.write("等値 br "); } else { document.write("等値でない br "); } document.write(" br "); if( a === b) { document.write("同値 br "); } else { document.write("同値でない br "); } document.write(" br "); 正規表現 JavaScript1.2から正規表現に対応。 修飾子 g マッチしたものを全て出力。 i 大文字と小文字を区別しない。 例 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字:" + b + " br "); //-- /script 条件分岐 if 繰り返し処理 while() {} while(条件) { ステートメント } 条件が真の間、ステートメントを実行する。 do { ステートメント } while(条件); 条件が真の間、ステートメントを実行する。最初のステートメントは無条件で実行する。 for in for(プロパティ in オブジェクト) { } オブジェクトのプロパティ名全てに対して処理する。 【例1】 for(var property in navigator) { document.write(navigator[property]); document.write(" br "); } 関数 機能をモジュール化して、共通化する。資源の節約、バグの低減に有効。 書式 function 関数名(引数) { 処理 [return 式] } 関数リテラル 関数を変数(オブジェクト)に代入して使う。 【例】 var func = function(x,y) { return x * y; } func(10, 20); 変数 関数の外部で定義した変数は関数内で使える(グローバル。C言語と同じ)。 【例】 var aaa = "aaa"; function func(x,y) { return aaa; } window.self 自身のwindowオブジェクト window.opener マルチウィンドウの親 windo.parent フレーム分割の1つ親 with文 共通するオブジェクトの記述を省略するために使う。 書式 with(オブジェクト) { } 例 with(document) { write("aaa"); write("bbb"); } 配列 引数は文字列に変換され連想配列として作成される。 初期化 a = []; 代入 a[0] = 1; a[1] = 2; 削除 delete a[0] a[0]がundefinedになり、a[1]は残る。 先頭の抽出 b = a.shift() aの先頭は削除。 最後の抽出 b = a.pop() aの最後は削除。 指定位置の抽出 b = a.slice(start, [end]) endがなければ最後まで。aは変化しない。bは配列になる。 オブジェクト コンストラクタ関数を作成し、newして使う。メソッドは、クラス固有なのでprototypeプロパティに設定する。 【例】 //長方形 function Rectangle(x, y){ this.x = x; this.y = y; } Rectangle.prototype.area = function(){ return this.x * this.y; } var rect = new Rectangle(10, 20); document.write("x:" + rect.x + " br "); document.write("y:" + rect.y + " br "); document.write("面積:" + rect.area() + " br "); クラスプロパティ コンストラクタ関数のプロパティ。定数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Number.MAX_VALUE クラスメソッド コンストラクタ関数の関数。汎用的な関数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。 【例】 Date.parse() クラスの継承 プロトタイププロパティを利用して、継承したクラスを作成する。 【例】 // クラスの継承 function PointedRectangle(w, h, x, y) { Rectangle.call(this, w, h); this.x = x; this.y = y; } // メソッドを継承させる PointedRectangle.prototype = new Rectangle(); // プロトタイププロパティを削除 delete PointedRectangle.prototype.width; delete PointedRectangle.prototype.height; // コンストラクタを元に戻す PointedRectangle.prototype.constructor = PointedRectangle; var prect = new PointedRectangle(20, 40, 200, 400); 連想配列 プロパティのアクセス方法には以下の2とおりの方法がある。 obj.property = 値; obj["property"] = 値; 2番目の方法を使うとプロパティ名を変数として与えることができるので、連想配列として使える。 WEBアプリケーション Java Scrriptの記述 script タグの中に本体を記述。 script は、何回でも、どこにでも記述可能。ただし呼び出しの前に本体を記述しなければならない。 header タグの中に記述する場合が多い。 JavaScriptに対応していないブラウザに対処するために以下の書式を使う。 script !-- ・・・ //-- /script イベントハンドラ onclick リンク、ボタンの属性。JavaScriptの関数を指定する。falseを返すと、デフォルト処理をキャンセルする(フォームのときは、送信しない。)。 onload body タグに指定する。ドキュメントや画像などの外部コンテンツが完全に読み込まれたときにこのイベントハンドラが呼び出される。 右クリック禁止 body oncontextmenu="return false"" 外部JavaScriptファイル参照 script type="text/javasctipt" src="XXX.js" /script 組み込みメソッド setTimeout(実行する関数, 遅れ時間(ms)) 【例】 ar timer = false; function foo(){ if(timer == false){ setTimeout(function() { timer = true; foo(); timer=false; }, 2000); return; } alert("hello!"); } foo(); 【例12】 var isTrx = 0; var delayTime = 5000; //2重押下抑止 function check() { if (isTrx == 1) { return false; } isTrx = 1; setTimeout( isTrx = 0; , delayTime); return true; } テクニック [Enter]キーでフォームの内容が送信されるのを防ぐ記述 form action="***" method="***" onsubmit="return false;" オブジェクトモデル window +--document | +-- anchors[] | +-- applets[] | +-- Area | +-- forms[] | | +-- elements[] 要素は、Button,CheckBox,・・・ | | +-- Button | | +-- CheckBox | | +-- FileUpload | | +-- Password | | +-- Hidden | | +-- Radio | | +-- Reset | | +-- Select | | | +-- options[] | | | | | +-- Submit | | +-- Text | | +-- Textarea | +-- images[] | +-- links[] +-- history +-- location +-- frames[] +-- navigator +-- screen windowは、ブラウザウィンドウまたはフレームを表す。 フォーム フォーム全体:forms フォームの各要素:elements 添え字によるアクセス document.forms[1].elements[2] ・・ 2番目のformの3番目の要素(button,password,radiobox,textareaなど ) 名前によるアクセス html form name="f1" /form form name="f2" /form /html 上記例では、document.f2 イベント イベント 発生タイミング イベントハンドラ 対象オブジェクト blur ユーザのフォーカスが離れたとき onBlur テキストフィールド focus フォーカスされたとき onFocus テキストフィールド click クリックしたとき onClick ボタン、ラジオボタン、チェックボックス、サブミットボタン、リンク、リセットボタン change 値が変更されたとき onChange テキストフィールド load WebページがWebブラウザにロードされたとき onLoad bodyタグ unload 別のページに移動したとき onUnLoad bodyタグ 【例 onLoad】 body onLoad="alert( ロードしました )" 【例 onUnLoad】 body onUnLoad="alert( 移動しました )" 動作しない!! 新たにウィンドウを開く window.open(URL, ターゲット, フィーチャ); URL ロードするサイトのURL ターゲット フィーチャ 何も設定しなければ、起動もとのウィンドウと同じ。一つでも設定すれば、設定した項目のみ有効。 項目 説明 height=X ウィンドウの高さ width=X ウィンドウの幅 left=X ウインドウの画面左からの位置 top=X ウインドウの画面トップからの位置 location URL入力用のバーを表示 menubar メニューバーを表示 resizable ウィンドウのサイズを変更可能にする status ウィンドウ下のステータスバーを表示 scrollbars スクロールバーを表示 セキュリティ JavaScriptでできないこと クライアントのファイルに対して読み書きができない。 ネットワーク機能自体をサポートしない(生のTCP/IPを使えない) 別ブラウザを開くのは、ボタンクリックなどのユーザ操作に対してのみ。(無制限なポップアップウィンドウ表示をなくすため) クローズできるのは、自分が開いたウィンドウのみ 小さなウィンドウ(100ピクセル以下)を開くことはできない。 スクリプトをロードしたサーバと異なるサーバからロードしたドキュメントを操作することはできない。(同一出身ポリシー) 作成例 html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" meta http-equiv="Content-Style-Type" content="text/css" meta http-equiv="Content-Script-Type" content="text/javascript" title JavaScriptテスト /title style type="text/css" !-- h1 {font-size 14pt}; h2 {font-size 12pt} -- /style /head body oncontextmenu="return false" onLoad="alert( ロードしました )" onunload="alert( ページを移動しました )" h1 単純な文字出力 /h1 script type="text/javascript" !-- document.write("Hello Java Script."); //-- /script h1 外部ファイル /h1 script type="text/javascript" src="aaa.js" /script h1 正規表現 /h1 h2 マッチした文字を返す /h2 script !-- var a = "That pen s price is 100$. this pen s price is 200$"; var regx = /[0-9]+/g; var b = a.match(regx); document.write("検索対象文字列" + a + " br "); document.write("正規表現" + regx + " br "); document.write("マッチした文字:" + b + " br "); //-- /script h1 繰り返し処理 /h1 h2 for in /h2 script type="text/javascript" !-- for(i in navigator) { document.write(navigator[i]); document.write(" br "); } //-- /script h1 関数の使用 /h1 script type="text/javascript" !-- function func1(a) { return a*2; } document.write("3*2=" + func1(3) + " br " ); //-- /script h1 with文 /h1 script type="text/javascript" !-- with(document) { write("aaa" + " br "); write("bbb" + " br "); } //-- /script h1 マウス右クリック無効化 /h1 script language="JavaScript" !-- function RightOff(e) { if (document.layers e.which == 3){ //NNの場合 alert("右クリックメニューは機能停止しました!"); return false; }else if (document.all event.button == 2) { //IEの場合 alert("右クリックメニューは機能停止しました!"); return false; } return true; } if(document.all){ //IEの場合 document.onmousedown = RightOff; } if(document.layers){ //NNの場合 window.onmousedown = RightOff; window.captureEvents(Event.MOUSEDOWN); } // -- /script firefoxでは無効。 h1 onLoad /h1 p ページを開いたときに起動。bodyタグに記述。 /p h1 onUnLoad /h1 p 別のページに移動したときに起動。bodyタグに記述。 /p a href="http //localhost/PukiWiki/index.php" ホームに移動 /a h1 onBlur/onFocus /h1 form input type="text" onblur="alert( onblur action. )" value="" input type="text" onfocus="alert( onfocus action. )" value="" /form h1 別ウィンドウを開く /h1 h1 タイマー /h1 script type="text/javascript" !-- var cnt = 0; var ret; function rewritePg() { var p = document.getElementById("p1"); if(p == null) { alert("p1 null."); } if( cnt % 2 == 0 ) { p.innerHTML = "bbb"; /** p.firstChild.data = "bbb" でも良い。 */ } else { p.innerHTML = "aaa"; } cnt++; ret = setTimeout("rewritePg()", 2000); } function stopRewrite() { clearTimeout(ret); } //-- /script p 2秒ごとにパラグラフの文字を変える。 /p p id="p1" aaa /p input type="button" value="開始" onClick="rewritePg()" / br input type="button" value="停止" onClick="stopRewrite()" / br / body /html
https://w.atwiki.jp/f_go/pages/181.html
ツール系 javascript/サーヴァント経験値計算 javascript/成長曲線 javascript/サーヴァント一覧 javascript/skilllist (スキル一覧) 表示用 javascript/gallery (スライドショー用) javascript/twitter javascript/zeb_row (table) javascript/page-bottom javascript/itemicon javascript/statuscalc (鯖詳細ページのHP/ATK自動挿入) javascript/truename (左メニュー用の真名隠し設定) javascript/common-style 各種javascriptのstyle集約(atwiki仕様変更に備えて) javascript/keepedopenclose (折りたたみ状態を記憶するopencloseプラグインもどき) javascript/rmyet (未作成ページ一覧から不要な行を削除する。) javascript/announce (告知用のいろいろ) javascript/tablefilter (表の絞り込み) javascript/npsort (NP獲得効率専用) javascript/sortabletable (pukiwikiのsortabletableプラグインのjs実装)使い方 規制 javascript/pcomment_hide javascript/pcomment_hide_all コメント調整 javascript/pcomment_display javascript/tabs javascript/commentics 更新履歴 javascript/recent_cmlog_only 編集者向け javascript/クエスト情報変換 javascript/クエスト情報変換【タブ用】 javascript/アイテム要求数 (即席) javascript/過去ログ作成 (即席) 確認用 javascript/test javascript/test-style その他 javascript/menu javascriptに詳しい方、得意な方、よければ助言願います。 「こんなツールが欲しい」「こんな機能を追加して欲しい」などあれば、掲示板/編集掲示板まで。
https://w.atwiki.jp/comcatet/pages/29.html
Dateオブジェクト XMLHttpRequest プロトタイプチェーンとクラス ループ処理 内包表記 ES5setter - JavaScript | MDN getter - JavaScript | MDN ES6の実験機能アロー関数Arrow functions - JavaScript | MDN Firefox 22(Nightly) で ArrowFunction が実装されたが、扱いが難しい - hogehoge @teramako 自身のthisを持たない 自身のargumentsを持たない(fx43から) デフォルトパラメーターDefault parameters - JavaScript | MDN ES.next のデフォルトパラメータが Firefox Nightly で実装された - hogehoge @teramako Rest parameterRest parameters - JavaScript | MDN ES.next の FunctionRestParameter が Firefox Nightly で実装された - hogehoge @teramako Spread operatorSpread operator - JavaScript | MDN Method definitionMethod definitions - JavaScript | MDN function*function* - JavaScript | MDN クラスClasses - JavaScript | MDN JavaScriptにもクラスがやってきた!JavaScriptの新しいclass構文をマスターしよう | HTML5Experts.jp 分割代入Destructuring assignment - JavaScript | MDN JavaScript の分割代入まとめ - mooz deceives you
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html
JavaScriptの言語仕様に関するルール 各項目の左側にある三角ボタンで、詳細情報の表示・非表示を切り替えられます。また下のボタンを使うと全項目を一度に変更することができます。 全て切り替える var 常に、varと共に変数を宣言します。 varの指定がない場合、変数はグローバルコンテキストに置かれ、既存の値を上書きする可能性があります。またもし宣言そのものがなければ、その変数のスコープがどこにあるのか分かりにくくなります(その変数はローカルスコープと同じように、DocumentやWindowの中に存在していてもよいのです)。従って常にvarと共に変数を宣言してください。 定数 定数値にはNAMES_LIKE_THISのような名前をつけます。 変数やプロパティの参照先が固定されている(上書きできない)ことを示すには、@constを使います。 Internet Explorerがサポートしないconst キーワードは決して使いません。 定数値 ある値を一定で変化しないものとして扱いたい場合、名前をCONSTANT_VALUE_CASE.ALL_CAPSのように全て大文字にし、さらに@constによって上書きできないことを示してください。 プリミティブ型(number、string、boolean)はもともと定数値です。 オブジェクトの不変性の判断は、より主観的です - 観察可能な状態変化が起きていない場合のみ、オブジェクトは不変とみなされるべきです。ただしCompilerはこの考え方を強制しません。 (変数・プロパティへの)定数ポインタ 変数やプロパティに付けられた@constアノテーションは、それらを上書きできないことを表します。この規則はCompilerによるビルド時に強制されます。またこの動作はconst キーワードとも矛盾しません。(Internet Explorerがサポートしないため、constキーワードは使いませんが。) メソッドに付けられた@constアノテーションは、サブクラスがそのメソッドをオーバーライドできないことを表します。 コンストラクタに付けられた@constアノテーションは、そのクラスをサブクラス化できないことを表します。(Javaにおける@finalと同じです) 例 @constは、(CONSTANT_VALUES_CASE形式の名前のように)変数の値そのものが一定であることを必ずしも意味しません。一方CONSTANT_VALUES_CASE形式の名前は@constの示す内容を内包しています。 /** * ミリ秒単位のリクエストタイムアウト時間 * @type {number} */ goog.example.TIMEOUT_IN_MILLISECONDS = 60; 大文字だけの名前は@constの内容を含むため、この秒数は定数です。値の上書きはできません。 オープンソースのコンパイラは@constがついていないシンボルの上書きを許容すると思われます。 /** * 文字列を返すURLのマップ * @const */ MyClass.fetchedUrlCache_ = new goog.structs.Map(); /** * サブクラス化できないクラス * @const * @constructor */ sloth.MyFinalClass = function() {}; このケースではプロパティ値であるオブジェクトは上書きされませんが、オブジェクトの値は頻繁に変化し一定ではありません。(このため名前には大文字ではなくキャメルケースが使われています) セミコロン 常にセミコロンを使います。 暗黙的なセミコロンの挿入に依存することは、微妙な、デバッグしにくい問題を引き起こします。もっと良い方法を選びましょう。 次のコードのセミコロンの無い箇所は、その危険性を示す典型的な例です // 1. MyClass.prototype.myMethod = function() { return 42; } // ここにはセミコロンがありません。 (function() { // ローカルスコープを生成する関数の中に書かれた初期化処理。 })(); var x = { i 1, j 2 } // ここにはセミコロンがありません。 // 2. Internet ExplorerかFirefoxかによって処理を振り分けます。 // こんなコードは書かないとは思いますが、とりあえずお許しを。 [ffVersion, ieVersion][isIE](); var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // ここにはセミコロンがありません。 // 3. bash風の条件分岐。 -1 == resultOfOperation() || die(); 何が起きるか? JavaScriptエラー - 先ず、42を返す関数が2番目の関数を引数として実行されます。次に42が "コール" され、数字なのでエラーが発生します。 x[ffVersion, ieVersion][isIE]()を実行しようとしたランタイムから、おそらく undefined にはそのようなプロパティはありません という風なエラーが返されます。 配列マイナス1はNaNとなり、NaNはどんな値とも一致しないため必ずdie()が呼び出されます(たとえresultOfOperation()の戻り値がNaNだったとしても)。THINGS_TO_EATにはdie()の戻り値が代入されます。 なぜ? その存在が安全に推測される場合を除き、JavaScriptは文(statement)の末尾にセミコロンを要求します。上の各例では、関数宣言、オブジェクト、配列リテラルは1つの文の内側にいると見なされています。閉じ括弧は文の終了を表すには不十分です。JavaScriptは中置演算子(+、-など)や括弧では決して文を終了させません。 このことは本当に人々を驚かせます。従って文の末尾は確実にセミコロンで終わらせるべきです。 セミコロンと関数について 関数式の後ろにはセミコロンを付けますが、関数宣言の後ろには付けません。その違いを示す非常に分かりやすい例がこれです var foo = function() { return true; }; // ここにはセミコロンを付けます function foo() { return true; } // ここにはセミコロンを付けません ネストされた関数 使えます。 ネストされた関数は、例えば継続(continuation)の生成やヘルパー関数の隠蔽を行う際に、とても役立ちます。遠慮なく使いましょう。 ブロック内での関数宣言 使わないでください。 次のように書いてはいけません if (x) { function foo() {} } ほとんどのスクリプトエンジンはブロック内での関数宣言をサポートしていますが、それはECMAScript(ECMA-262,13及び14項を参照)の仕様には含まれていません。各エンジンの実装は、互いの間でも将来のECMAScriptに対しても、一貫性が保証されていません。ECMAScriptは関数の宣言をスクリプトのトップレベルか関数内のスコープでのみ許しています。代わりに変数へ関数を代入すれば、ブロック内でも関数を定義することが可能です if (x) { var foo = function() {}; } 例外 使えます。 もし自明でない何かを行うのであれば(アプリケーション開発フレームワークの利用など)、基本的に例外は避けられません。使いましょう。 独自の例外 使えます。 独自の例外を使わない場合、何かの値を返す関数が更にエラー情報も返そうとすると、その方法はトリッキーかつエレガントでないものになりそうです。戻り値をエラー情報への参照にするか、あるいはエラー情報をメンバに持つオブジェクトに変えることになるでしょう。これらは本質的に、原始的な例外ハンドリングのハックと言えます。必要であればどんどん独自の例外を使ってください。 標準機能 標準機能は非標準の機能よりも常に優先されます。 移植性と互換性を最大化するため、常に標準化された機能の方を選択してください。(例えばstring[3]ではなく string.charAt(3)を、DOM要素へのアクセスには特定のアプリケーションが提供する簡略化された機能ではなく、DOMの標準機能を使います) プリミティブ型のラッパーオブジェクト 使わないでください。 プリミティブ型のラッパーオブジェクトは使う理由がないだけでなく、危険ですらあります var x = new Boolean(false); if (x) { alert( hi ); // hi と表示されます。 } このようにしてはいけません! ただし、型のキャストに使うのは全く問題ありません var x = Boolean(0); if (x) { alert( hi ); // これは決してアラートされません。 } typeof Boolean(0) == boolean ; typeof new Boolean(0) == object ; これは何らかのデータを数値、文字列、論理値に変換するにはとても良い方法です。 多段階のプロトタイプ階層 好ましくありません。 多段階のプロトタイプ階層はJavaScriptが実装する継承手法です。ユーザ定義クラス D のプロトタイプを別のユーザ定義クラス B にすると多段階の階層構造が作れます。しかしこれらの階層構造を正しく把握しておくのは、最初の状態と比べるとかなり難しいことです。 このため、継承にはClosure Libraryのgoog.inherits()のようなライブラリ関数を使うのが最善です。 function D() { goog.base(this) } goog.inherits(D, B); D.prototype.method = function() { ... }; メソッドとプロパティの定義 /** @constructor */ function SomeConstructor() { this.someProperty = 1; } Foo.prototype.someMethod = function() { ... }; "new"によって生成されるオブジェクトにメソッドやプロパティを付け加えるにはいくつかの方法がありますが、メソッドではこのスタイルが推奨されます Foo.prototype.bar = function() { /* ... */ }; その他のプロパティでは、コンストラクタの中で初期化を行うスタイルが推奨されます /** @constructor */ function Foo() { this.bar = value; } なぜ? 現在のJavaScriptエンジンは、オブジェクトをその「形状」に基いて最適化します。プロパティの追加(プロトタイプに設定された値のオーバーライドも含まれます)はオブジェクトの形状を変化させ、パフォーマンスの低下をもたらします。 delete より好ましいのは this.foo = null の方です。 Foo.prototype.dispose = function() { delete this.property_; }; ではなく、こう書きましょう Foo.prototype.dispose = function() { this.property_ = null; }; 現代のJavaScriptエンジンにおいて、プロパティの数を増減させる処理は、値の再割り当てに比べはるかに低速です。次の場合を除き、deleteキーワードは避けるべきです。 プロパティ名をキーとする反復処理を行なっており、そのキーを削除する必要があるとき if (key in obj)の結果を変更する必要があるとき クロージャ 使えます、しかし慎重に。 クロージャを作成できる能力は、おそらく最も役に立つ、しかししばしば見落とされているJSの特長です。クロージャの動作についての良い解説はこちらをご覧ください。 しかし1つ覚えておいて欲しいのは、クロージャは自身を取り囲むスコープへのポインタを保持しているという点です。このためクロージャをDOM要素ヘ結びつけると、循環参照が発生しメモリリークとなることがあります。例えば次のコードです function foo(element, a, b) { element.onclick = function() { /* a と b を使う */ }; } クロージャ関数は element、a、bへの参照を持っています。elementを使わないとしてもです。elementもまたクロージャへの参照を保持しており、そこでガーベジコレクションが回収できない循環ができてしまっています。この状況では、コードは次のように構成されるべきです function foo(element, a, b) { element.onclick = bar(a, b); } function bar(a, b) { return function() { /* a と b を使う */ }; } eval() コードローダまたはREPL(Read-eval-print loop)にのみ使います。 eval()はセマンティクスに混乱を引き起こします。またユーザの入力を含む文字列をeval()することは危険な行為です。たいていはもっと適切、明確、安全なコードの書き方が存在するため、通常その利用は許容されません。 JSONを用いたRPCの際、データの解釈にはeval()の代わりにJSON.parse()を使います。 以下のような結果を返すサーバがあるとします { "name" "Alice", "id" 31502, "email" "looking_glass@example.com" } var userInfo = eval(feed); var email = userInfo[ email ]; 配信データが悪意あるJavaScriptコードを含むものに改変されていたとして、eval()を使っていたらコードはそのまま実行されてしまうでしょう。 var userInfo = JSON.parse(feed); var email = userInfo[ email ]; JSON.parse()を使うと、(全ての実行可能なJavaScriptを含む)不正なJSONに対して例外が発生します。 with() {} 使わないでください。 withの使用はプログラムのセマンティクスを曇らせます。withで指定されたオブジェクトはローカル変数と衝突するようなプロパティを持てるため、プログラムの意図が大きく変えられてしまうおそれがあります。例えばこのコードでは何が起きるでしょうか? with (foo) { var x = 3; return x; } 答えは「あらゆることが起きる」です。ローカル変数xはfooのプロパティに乗っ取られます。もしxがsetterだった場合、3の代入は他の多くのコードを実行させる原因となりえます。withを使ってはいけません。 this オブジェクトのコンストラクタとメソッド、クロージャの作成時にのみ使います。 thisのセマンティクスは扱いが難しく、場合によってその参照先はグローバルオブジェクト(ほとんどはこれです)、呼び出し元のスコープ(eval内)、DOMツリー内のノード(要素に追加されたHTMLイベントハンドラ内)、新しく生成されたオブジェクト(コンストラクタ内)、何か他のオブジェクト(call()またはapply()された関数内)と変化します。 thisは容易に間違いの原因になってしまうので、本当に必要な次の場面だけに使用を限定します。 コンストラクタの中 オブジェクトのメソッドの中(クロージャの作成時を含む) for-in ループ オブジェクト / マップ / ハッシュ内をキーによって走査する場合のみ使えます。 for-inループはしばしば 配列(Array)内の要素をループ処理するという、間違った使い方をされています。for-inループは 0からlength-1までをループするのではなく、オブジェクトとそのプロトタイプチェーンに存在するキーを走査するものです。従ってそのような使い方はエラーを起こしがちです。失敗例をいくつか示します function printArray(arr) { for (var key in arr) { print(arr[key]); } } printArray([0,1,2,3]); // これは動作します。 var a = new Array(10); printArray(a); // これは正しくありません。 a = document.getElementsByTagName( * ); printArray(a); // これは正しくありません。 a = [0,1,2,3]; a.buhu = wine ; printArray(a); // これも正しくありません。 a = new Array; a[3] = 3; printArray(a); // これも正しくありません。 配列のループには必ず通常のfor文を使ってください。 function printArray(arr) { var l = arr.length; for (var i = 0; i l; i++) { print(arr[i]); } } 連想配列 決してArrayをマップ / ハッシュ / 連想配列として使わないでください。 Arrayを連想配列として使うことは許されていません..もっと正確に言えば、数字インデックス以外で配列要素にアクセスすることは許されていません。もしマップやハッシュが必要なのであれば、Arrayの代わりにObjectを使いましょう。実際、連想配列に求められている機能はArrayではなくObjectに実装されており、ArrayはただObjectを拡張しているに過ぎません(その他のJSの全てのオブジェクト、つまり Date、RegExp、Stringなども同様です)。 複数行の文字列リテラル 使わないでください。 このような書き方は禁止です var myString = A rather long string of English text, an error message \ actually that just keeps going and going -- an error \ message to make the Energizer bunny blush (right through \ those Schwarzenegger shades)! Where was I? Oh yes, \ you\ ve got an error and all the extraneous whitespace is \ just gravy. Have a nice day. ; 各行の先頭にある空白はコンパイル時にも安全に取り除かれることはなく、バックスラッシュ(\)の後ろの空白は分かりにくいエラーをもたらします。またこの記法はほとんどのエンジンでサポートされているとはいえ、ECMAScriptの標準ではありません。 代わりに、文字列の結合を使ってください var myString = A rather long string of English text, an error message + actually that just keeps going and going -- an error + message to make the Energizer bunny blush (right through + those Schwarzenegger shades)! Where was I? Oh yes, + you\ ve got an error and all the extraneous whitespace is + just gravy. Have a nice day. ; 配列リテラルとオブジェクトリテラル 使えます。 ArrayとObjectのコンストラクタではなく、配列リテラルとオブジェクトリテラルを使って下さい。 Arrayコンストラクタの引数はエラーの原因になりがちです // 配列の長さは3。 var a1 = new Array(x1, x2, x3); // 配列の長さは2。 var a2 = new Array(x1, x2); // もし x1 が自然数であれば、配列の長さは x1 になります。 // もし x1 が数値でかつ自然数でなければ、例外が発生します。 // それ以外なら、配列は x1 を値とする長さ1の配列になります。 var a3 = new Array(x1); // 配列の長さは0。 var a4 = new Array(); このため、誰かが引数の数を2つから1つに変更すると、その配列の長さは想定と合わなくなる可能性があります。 これらの奇妙な事例は、より可読性の高い配列リテラルを使用することで避けられます var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = []; Objectコストラクタには同じ問題はありませんが、可読性と一貫性の面からオブジェクトリテラルを使うべきです var o = new Object(); var o2 = new Object(); o2.a = 0; o2.b = 1; o2.c = 2; o2[ strange key ] = 3; 上は、こう書かれるべきです var o = {}; var o2 = { a 0, b 1, c 2, strange key 3 }; 組込みオブジェクトのプロトタイプの書き換え しないでください。 Object.prototypeやArray.prototypeのような組込みオブジェクトのプロトタイプを書き換えることは、固く禁じます。同じ組込みであってもFunction.prototypeなどはそれほど危険ではありませんが、それでもデバッグの難しい問題を引き起こす可能性があります。よって書き換えは避けるべきです。 Internet Explorerの条件付きコメント 使わないでください。 これは禁止です var f = function () { /*@cc_on if (@_jscript) { return 2* @*/ 3; /*@ } @*/ }; 条件付きコメントはライタイムのJavaScriptシンタックス・ツリーを改変してしまうので、ツールによる自動化の妨げになります。
https://w.atwiki.jp/hear_br0wn/pages/26.html
Javascript基礎①(概要) Javascript基礎②(関数と変数) Javascript基礎③(四則演算) Javascript基礎④(配列とインクリメント・デクリメント) Javascript基礎⑤(関数と引数) Javascript基礎⑥(for構文) Javascript基礎⑦(if構文(条件分岐))
https://w.atwiki.jp/kobapan/pages/110.html
JavaScript/【気象庁】過去の気象(今月) JavaScript/空オブジェクト・空配列の判定 JavaScript/GoogleCalenderをフルスクリーンで開くブックマークレット JavaScript/URLからファイル名を取得する JavaScript/1秒後に実行する JavaScript/Grunt bake - Simple static html partials includes JavaScript/jquery.lazyload - 画像を遅延ロード
https://w.atwiki.jp/a_kurosawa/pages/19.html
◆javascript ◆javascript script type="text/javascript" src="aaaaa.js" /script script type="text/javascript" src="aaaaa.js" /script type="text/javascript"の部分がタイプミスとかしてると、 ちゃんと参照できないよ。(当たり前)
https://w.atwiki.jp/yasrun/pages/18.html
001. FireFox!!!!! getElementByIdしろこのこの 002. Fキー押下スキャン 003. IEでJavaScript実行しようとするとジャマされる… 004. ブラウザーの言語設定を取得